<template>
  <div class="com-container">
    <div id="rose" style="width: 100%; height: 100%; " class="com-chart"></div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';
import { getProvincePercent} from '@/common/getProvince'
export default {
  data() {
    return {
      dataArray: [],
      dataList: [],
      legendArr: [],
      myEchart2: null,
      
      startValue: 1,
    
      endValue: 30,
    
      timerId: null,
      provinceData: []
    }
  },
  props: {
    type: {
      type: String,
      default: () => {
        return ''
      }
    },
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    optionList: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapStyle: {
      type: Object,
      default: () => {
        return {
          width: '1000',
          height: '900',
          zoom: 1,
          tooltip: true
        }
      }
    }
  },
  watch: {
    optionList() {
      this.renderMap()
    },
    mapStyle() {
      this.renderMap()
    }
  },
  mounted() {
    this.renderMap()
    this.startInterval()
  },
  beforeDestroy() {
    this.myEchart2 && this.myEchart2.clear()
    clearInterval(this.timerId)
  },
  methods: {
    renderMap() {
      this.handleData(this.optionList)
      this.setEchartOption()
    },
    handleData(res) {
      this.legendArr = []
      for (let i = 0; i < res.length; i++) {
        let dataObj = {
          name: '',
          value: ''
        }
        let resObj = res[i]
        dataObj.name = resObj.city
        this.legendArr.push(resObj.city)
        if (this.title !== '铁粉数') {
          dataObj.value = resObj.score / 110
        } else {
          dataObj.value = resObj.score / 300
        }
        dataObj.score = resObj.score
        dataObj.list = resObj.list
        this.dataArray.push(dataObj)
      }
      this.dataArray = this.dataArray.sort(function (a, b) {
        return b.value - a.value
      })
      this.dataList = this.dataArray
      this.provinceData = getProvincePercent(this.dataList)
    },
    setEchartOption() {
      if (!this.myEchart2) {
        this.myEchart2 = echarts.init(document.getElementById('nightingale'))
      }
      var that = this
     
      const provinceInfo = this.provinceData.map(item => item.name)
      var option = {
        tooltip: {
          trigger: 'item',
          // borderColor: 'transparent',
          show: true,
          transitionDuration: 0,
          showContent: true,
          enterable: true,
          appendToBody: true,
          // backgroundColor: 'transparent', // 提示框浮层的背景颜色。
          axisPointer: {
   
            type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true // 坐标轴指示器是否自动吸附到点上
          },
          textStyle: {
            // 提示框浮层的文本样式。
            color: '#41feff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14
          },
          padding: 0, // 提示框浮层内边距，
          formatter: function (params) {
            var str = ''
            if (params) {
              var demo = ''
              if (that.dataArray[params.dataIndex].list.length > 0) {
                that.dataArray[params.dataIndex].list.forEach((item, index) => {
                  if (index < 3) {
                    demo += `<a href="${`https://blog.csdn.net/` + item.username}" target="_blank" class="exhibition active"><p class="back rank_${index + 1}"></p> <p class="img"> <img src="${item.avatar}" alt=""> <span>${item.nickname || item.username}</span></p> <p class="num">${
                      item.score
                    }</p></a>`
                  }
                })
              } else {
                demo = ` <div class="popover-empty">
                        <span>暂无上榜</span>
                        <a href="" target="_blank">前往查看热榜更新规则</a>
                      </div>`
              }
              str = `<div class="popover">
                    <div class="popover-top">
                      <p class="popover-title">  <a href="${`https://blog.csdn.net/` + that.dataArray[params.dataIndex].list[0].username}" target="_blank"><img src="${that.dataArray[params.dataIndex].list[0].avatar}" alt=""> <span class="name"> ${
                that.dataArray[params.dataIndex].list[0].nickname || that.dataArray[params.dataIndex].list[0].username
              } </span></a> 成为 <span> ${params.name} </span> 领军人物之首 </p>
                      <p class="popover-city"><i class="force"></i><span class="city">${params.name}</span> <span>${that.title}</span> <span class="num">${that.dataArray[params.dataIndex].score}</span></p>
                      <div class="exhibition"><p>排名</p> <p class="img">用户</p> <p>${that.title}</p></div>
                      ${demo}
                    </div>
                  </div>`
            }
            return str
          }
        },
        title: {
          text: '▎省份值统计',
          left: 20,
          top: 10
        },
        legend: {
          top: '10%',
          // 图标类型 圆形
          icon: 'circle',
          data: provinceInfo.slice((this.startValue - 1) * 8, this.startValue * 8),
          textStyle: {
            // 文字颜色
            color: '#fff',
            // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: '400',
            // 字体系列
            fontFamily: 'Source Han Sans CN',
            // 字体大小
            fontSize: 12
          }
        },
        dataZoom: [
          {
            // 滚动条以及缩放
            type: 'inside',
            startValue: 0, // 从头开始。
            endValue:10
          }
        ],
        series: [
          {
            top: '20%',
            type: 'pie',
            roseType: 'radius',
            data: this.provinceData.slice((this.startValue - 1) * 8, this.startValue * 8),
            label: {
              show: true,
              formatter: function (params) {
                return `${params.data.name}-${params.data.pre.toFixed(2)}%`
              },
              padding: [0, -60]
            },
            // 高亮状态下的样式
            emphasis: {
              labelLine: {
                // 连接文字的线条
                show: true
              }
            }
          }
        ]
      }
      this.myEchart2.setOption(option)
      // 鼠标经过关闭 动画效果
      this.myEchart2.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      // 鼠标离开 开启动画效果
      this.myEchart2.on('mouseout', () => {
        this.startInterval()
      })
      window.addEventListener('resize', () => {
        if (this.myEchart2) {
          this.myEchart2.resize()
        }
      })
    },
    // 改变柱形图 区域缩放起始与终点值的函数
    startInterval() {
      // 如果存在则关闭
      this.timerId && clearInterval(this.timerId)

      this.timerId = setInterval(() => {
        this.startValue++
        if (this.startValue * 8 > this.provinceData.length && (this.startValue + 1) * 8 > this.provinceData.length) {
          this.startValue = 1
        }
        this.setEchartOption()
      }, 3000)
    }
  }
}
</script>

<style lang="scss">
.popover {
  width: 300px;
  height: 258px;
  background-image: url('@/assets/img/popover.png');
  background-size: cover;
  padding-top: 10px;
  .popover-title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(119, 192, 255, 0.7);
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    width: 100%;
    img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 8px;
    }
    span {
      color: #77c0ff;
      margin: 0 6px;
    }
    a {
      display: flex;
      align-items: center;
    }
    span.name {
      margin-left: 0px;
      max-width: 78px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
  }
  .back {
    height: 26px;
    width: 20px !important;
    margin: 0 5px;
    &.rank_1 {
      background-image: url('@/assets/img/rank_1.png');
      background-size: cover;
    }
    &.rank_2 {
      background-image: url('@/assets/img/rank_2.png');
      background-size: cover;
    }
    &.rank_3 {
      background-image: url('@/assets/img/rank_3.png');
      background-size: cover;
    }
  }
  .popover-empty {
    height: 120px;
    text-align: center;
    span {
      font-size: 18px;
      font-weight: 500;
    }
    a {
      font-size: 14px;
      font-weight: 500;
      color: #77c0ff;
    }
  }
  .popover-city {
    height: 44px;
    line-height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    i.force {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url('@/assets/img/place-pc.png');
      background-size: cover;
    }
    span {
      font-size: 14px;
      font-weight: 500;
      color: #77c0ff;
      margin-left: 4px;
      &.city {
        margin-right: 48px;
      }
      &.num {
        color: rgba(41, 255, 163, 0.8);
      }
    }
  }
  .exhibition {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 0 16px;
    margin: 0 2px;
    p {
      font-size: 14px;
      font-weight: 500;
      color: rgba(119, 192, 255, 0.7);
      text-align: start;
      display: flex;
      &:nth-child(1) {
        width: 30px;
        text-align: center;
      }
      &:nth-child(3) {
        width: 80px;
        text-align: center;
        margin-left: 10px;
      }
      &.img {
        width: 120px;
        margin-left: 24px;
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          width: 88px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
    img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 8px;
    }
    &.active {
      p {
        color: #77c0ff;
      }
      .num {
        color: rgba(41, 255, 163, 0.8);
      }
      &:hover {
        background: #141f38;
        cursor: pointer;
      }
    }
  }
}
</style>